<template>
  <div>
    <div class="mySearch">
      <search></search>
    </div>
    <van-sidebar class="sidebar" v-model="activeKey">
      <van-sidebar-item v-for="(item,index) in tabsList" :key="index" :title="item.name" />
    </van-sidebar>
    <div class="goodsList">
      <img :src="goodsList[0].bannerUrl" alt width="100%" />
      <van-row class="showList">
        <van-col
          style="margin-bottom:0.25rem"
          span="7"
          offset="1"
          v-for="(item,index) in goodsList[0].list"
          :key="index"
        >
          <img style="margin-bottom:0.25rem" :src="goodsList[0].list[index].url" alt width="100%" />
          {{goodsList[0].list[index].name}}
        </van-col>
      </van-row>
    </div>
    <!-- 底部 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item
        replace
        :to="item.url"
        v-for="(item,index) in tabbarList"
        :key="index"
        icon="home-o"
      >{{item.name}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import search from "@/components/search";
export default {
  name: "classify",
  components: { search },
  data() {
    return {
      active: 2,
      activeKey: 0,
      tabsList: [
        { name: "推荐专区", id: 0 },
        { name: "宅家防护", id: 1 },
        { name: "爆品专区", id: 2 },
        { name: "新品专区", id: 3 },
        { name: "居家生活", id: 4 },
        { name: "服饰鞋包", id: 5 },
        { name: "美食酒水", id: 6 },
        { name: "个护清洁", id: 7 },
        { name: "母婴亲子", id: 8 },
        { name: "运动旅行", id: 9 },
        { name: "家电数码", id: 10 },
        { name: "全球特色", id: 11 }
      ],
      goodsList: [
        {
          bannerUrl:
            "https://yanxuan.nosdn.127.net/9f4bcf0d57149499584d59478a606e9e.jpg?quality=75&type=webp&imageView&thumbnail=0x196",
          list: [
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&ype=webp&imageView&thumbnail=144x144",
              name: "居家生活新品"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&type=webp&imageView&thumbnail=144x144",
              name: "洗澡按摩"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&type=webp&imageView&thumbnail=144x144",
              name: "推拿推拿"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&type=webp&imageView&thumbnail=144x144",
              name: "唱歌嫦娥"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&ype=webp&imageView&thumbnail=144x144",
              name: "玩着童谣"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&type=webp&imageView&thumbnail=144x144",
              name: "英雄联盟"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&type=webp&imageView&thumbnail=144x144",
              name: "居家生活新品"
            },
            {
              url:
                "https://yanxuan-item.nosdn.127.net/bdd5200ac2c7c7ff5e57ebcf0fffcf7e.png?quality=75&type=webp&imageView&thumbnail=144x144",
              name: "居家生活新品"
            }
          ]
        }
      ],
      tabbarList: [
        { name: "首页", url: "/index" },
        { name: "分类", url: "/classify" },
        { name: "值得买", url: "/" },
        { name: "购物车", url: "/shopCat" },
        { name: "个人中心", url: "/personal" }
      ]
    };
  }
};
</script>

<style>
.mySearch {
  width: 100%;
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid #ededed;
}
.sidebar {
  border-right: 1px solid #ededed;
  padding-top: 0.2rem;
  float: left;
  height: 100%;
  overflow: hidden;
  width: 2.3rem;
}
.van-sidebar-item {
  padding: 0.3rem;
}
.goodsList {
  margin-left: 2.3rem;
  padding: 0.4rem 0.4rem 0.28rem;
}
.showList {
  margin-top: 0.3rem;
}
</style>
